<template>
	<view>
		<z-paging :show-refresher-when-reload="false"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top" class="">
				<!-- <u-navbar :is-back="true" back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" title="优惠劵"></u-navbar> -->
				<back title="优惠劵"></back>
				<view class="" style="height: 130rpx;"></view>
				<view class="bar_css">
					<u-tabs bg-color="rgba(0,0,0,0)" :list="barList" font-size="28rpx" :bar-style="barStyle" :active-item-style="item_style" :is-scroll="false" :current="current" @change="barChange"></u-tabs>
				</view>
			</view>
		    <view class="list" >
				<view v-for="(item , index) in dataList" :key="index" class="list_item" :style="bgcStyle">
					<view class="list_item_left">
						<view class="list_item_left_1">
							<view class="list_item_left_2">
								<view class="shu"></view>
								<span>{{item.title}}</span>
							</view>
							<view class="list_item_left_3" :style="{ color:`${current==0?'red':'#000'}`}">
								<!-- 2天后过期 -->
							</view>
						</view>
						<view class="list_item_bottom">
							<span class="list_item_bottom1" style="margin-bottom: 14rpx;">
								<span style="color: #d4424c;">{{item.coupon_money}}元</span>
								<span>商品满减劵</span>
							</span>
							<span class="list_item_bottom2" style="margin-bottom: 12rpx;">
								{{item.remark}}
							</span>
							<span class="list_item_bottom2">
								本券有效期 {{item.end_time_remark}}
							</span>
							<image v-if="current==2" class="over_time" style="" src="../../static/vip/icon_63.png" mode=""></image>
							<image v-if="current==1" class="over_time" style="" src="../../static/vip/icon_64.png" mode=""></image>
						</view> 
					</view>
					<view v-if="current==0" class="list_item_right">
						未使用
					</view>
					<view  v-if="current==1" class="list_item_right">
						已使用
					</view>
					<view v-if="current==2" class="list_item_right">
						已过期
					</view>
					<!-- -->
					
					
				</view>
				<!-- <view class=""  v-for="(item , index) in dataList" :key="index">
					<view v-if="current==0"  class="list_item_box_wai" >
						<view class="list_item_box">
							<view class="list_item_box_left">
								劵
								<view class="list_item_box_left_small">
									{{item.title}}
								</view>
							</view>
							<view class="list_item_box_right">
								<view class="dian"></view>
								<span style="margin-bottom: 16rpx;">{{item.coupon_name}}</span>
								<span><span class="price">Ұ</span>{{item.coupon_money}}</span>
								<span class="coupon_time">{{item.end_time_remark}}</span>
								<view class="dian_bottom"></view>
							</view>
						</view>
						<view class="coupon_bottom">
							{{item.remark}}
						</view>
					</view>
					<view v-else class="list_item_box_wai"  >
						<view class="list_item_box_no ">
							<view class="list_item_box_left">
								劵
								<view class="list_item_box_left_small">
									{{item.title}}
								</view>
							</view>
							<view class="list_item_box_right">
								<view class="dian"></view>
								<span style="margin-bottom: 16rpx;">{{item.coupon_name}}</span>
								<span><span class="price">Ұ</span>{{item.coupon_money}}</span>
								<span class="coupon_time">{{item.end_time_remark}}</span>
								<view class="dian_bottom"></view>
							</view>
						</view>
						<view class="coupon_bottom">
							{{item.remark}}
						</view>
					</view>
				</view> -->
				
				
		    </view>
		</z-paging>
	</view>
</template>

<script>
	import back from '@/componts/back.vue';
	export default {
		components: {
			back
		},
		data() {
			return {
				style:{
				},
				bgcStyle:{
					background: 'linear-gradient(to right, #fff9f1, #d4424c)'
				},
				dataList:[],
				current:0,
				current_status:1,
				item_style:{
					color:'#333',
					fontSize:'28rpx'
				},
				barStyle:{
					background:'#000',
					height:'4rpx',
					padding:0
				},
				barList:[
					{name: '未使用'},
					{name: '已使用'},
					{name: '已过期'},
				],
			}
		},
		onLoad(data) {
			
		},
		onShow() {
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			var token = uni.getStorageSync('token')
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
			if(!token){
				uni.setStorageSync('isModule' , true)
				uni.showModal({
					title: '登录',
					content: '登录后可使用完整功能',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						uni.navigateTo({
							url:'/pages/login/login'
						})
					} else { 
						uni.switchTab({
							url:'/pages/index/index'
						})
						}  
					} 
				})
			}
			if(this.$refs.paging){
				this.$refs.paging.reload()	
			}
		},
		
		
		methods: {
			barChange(e){
				this.current = e
				this.current_status = e+1
				this.$refs.paging.reload()	
				if(e == 0){
					this.bgcStyle.background = 'linear-gradient(to right, #fff9f1, #d4424c)'
				}
				if(e == 1){
					this.bgcStyle.background = 'linear-gradient(to right, #fff9f1, #896b51)'
				}
				if(e == 2){
					this.bgcStyle.background = 'linear-gradient(to right, #fff9f1, #c3a367)'
				}
			},
			queryList(pageNo, pageSize) {
				/**
				 * @type2 1 代买 2代付
				 * @status 0待支付 1已支付 2退款中 3已退款 4已发货
				*/ 
			   var status = 0
				var data = {
					page:pageNo,
					limit:pageSize,
					state:this.current_status //优惠券状态 1已领用（未使用） 2已使用 3已过期 4已作废
				}
				this.$wqzApi.Index_coupon(data).then(res=>{
					// console.log(11111111)
					this.$refs.paging.complete(res.data);
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url(./coupon.css);
</style>
